<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>酷狗520猜歌</title>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<!-- 加载页 -->
		<div class="loading">
			<div class="Bj"><img src="img/loadingBj.png" ></div>
			<div class="star"><img src="img/星星.png" ></div>
			<div class="renwu"><img src="img/jiazaiye.png" ></div>
			<div class="kglogo"><img src="img/logoQg.png" ></div>
			<div class="rock"><img src="img/rock.png" ></div>
			<div class="paizi"><img src="img/zsp.png" ></div>
			<div class="tBtn"><img src="img/tGuo.png" ></div>
			<div class="loadingText"><p>loading...<span class="loadnum"></span>%</p></div>
		</div>
		<!-- 首页 -->
		<div class="index">
			<div class="rotateBj">
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
			</div>
			<div class="logo"><img src="img/logo.png" ></div>
			<div class="motif"><img src="img/主题.png" ></div>
			<div class="mouth"><img src="img/嘴巴.png" ></div>
			<div class="people"><img src="img/人物.png" ></div>
			<div class="startBtn"><img src="img/按钮.png" ></div>
			
		</div>
		<!-- 选项 -->
		<div class="choose">
			<audio class="music" src="" loop="loop" ></audio>
			<ul class="cho">
				<li class="choA"></li>
				<li class="choB"></li>
				<li class="choC"></li>
			</ul>
			<div class="time"><span class="count">60</span>S</div>
		</div>
		<!-- 结果 -->
		<div class="result">
			<div class="touxiang"></div>
			<div class="logo"><img src="img/logo.png" ></div>
			<div class="duanwei"><img src="img/黄金.png" ></div>
			<div class="resultNum"><p>猜中了<span class="score">00</span>首</p></div>
			<div class="resultText"><p></p></div>
			<div class="re-L"><p class="again">再次挑战</p></div>
			<div class="re-R"><p>让盆友来挑战</p></div>
			<div class="phb"></div>
		</div>
		<div class="swiper-container">
		<div class="swiper-wrapper">
		   <!-- <div class="swiper-slide rotateBj one">
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>	
			</div> -->
		    <div class="swiper-slide movie">
				<div class="movieBj"><img src="img/yuanhBj.png" ></div>
				<div class="movieText ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">
					<img src="img/nbdsmjza.png" >
				</div>
				<div class="moviePeo ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"><img src="img/zixiaHz.png" ></div>
				<div class="movieWall ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"><img src="img/cQiang.png" ></div>
			</div>
		    <div class="swiper-slide rotateBj Rock">
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="light"><img src="img/light.png" ></div>
				<div class="peoL"><img src="img/wow-left.png" ></div>
				<div class="rockPeo"><img src="img/ygun.png" ></div>
				<div class="peoR"><img src="img/wow-right.png" ></div>
				<div class="floor"><img src="img/floor.png" ></div>
			</div>
			<div class="swiper-slide classical">
				<div class="classsicalBj"><img src="img/yhzq.png" ></div>
				<div class="light"><img src="img/light.png" ></div>
				<div class="clafloor"><img src="img/clafloor.png" ></div>
				<div class="peoxizao"><img src="img/peoxizao.png" ></div>
				<div class="dbanL ani" swiper-animate-effect=" slideInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"><img src="img/left-dban.png" ></div>
				<div class="feizaoPeo ani" swiper-animate-effect=" fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"><img src="img/feizao.png" ></div>
				<div class="dbanR ani" swiper-animate-effect=" slideInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"><img src="img/right-dban.png" ></div>
			</div>
			<div class="swiper-slide oldsong">
				<div class="oldsongBj"><img src="img/oldsongbj.png" ></div>
				<div class="light"><img src="img/light.png" ></div>
				<div class="flower"><img src="img/flower.png" ></div>
				<div class="singer"><img src="img/lrck.png" ></div>
			</div>
			<div class="swiper-slide Pop">
				 <div class="popBj"><img src="img/popbj.png" ></div>
				 <div class="woman"><img src="img/qaDx.png" ></div>
				 <div class="text ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.7s"><img src="img/poptext.png" ></div>
				 <div class="man ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"><img src="img/songhua.png" ></div>
			</div>
			<div class="swiper-slide car">
				<div class="carBj"><img src="img/carBj.png" ></div>
				<div class="light"><img src="img/light.png" ></div>
				<div class="yao"><img src="img/yao.png" ></div>
				<div class="che"><img src="img/car.png" ></div>
			</div>
		</div>
		</div>
		
		<script type="text/javascript" src="js/swiper.js"></script>
		<script type="text/javascript" src="js/swiper.animate1.0.3.min.js"> </script>
		<script type="text/javascript" src="js/preloadjs.js">
			
		</script>
		<script type="text/javascript" src="js/index.js"></script>
		<!-- <script>        
		  var mySwiper = new Swiper ('.swiper-container', {
		    // direction: 'vertical', // 垂直切换选项
		    // loop: true, // 循环模式选项
		    // speed: 2000,
			observer:true,
			parallax:true,
			initialSlide :0,
			// autoplay:true,
			 autoplay: {
			    delay: 10000,
			    stopOnLastSlide: false,
			    disableOnInteraction: true,
			    },
			on:{
			  init: function(){
			    swiperAnimateCache(this); //隐藏动画元素 
			    swiperAnimate(this); //初始化完成开始动画
			  }, 
			  slideChangeTransitionEnd: function(){ 
			    swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
			    //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
			  } 
			}
		  });
		  </script> -->
	</body>
</html>
